<template>
  <view>
    <view
      :class="{ disabled: detail.stockTotal == 0 }"
      class="goods-card"
      @click="goUrl"
    >
      <view class="goods-card__cover">
        <image
          :src="cover"
          mode="scaleToFill"
          class="goods-card__img am-wh-100 am-block"
          webp
        >
        </image>
        <view
          class="goods-card__sell-out am-flex-rc-center"
          v-if="detail.stockTotal == 0"
        >
          <image
            src="https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/19/d8f1d97152e24b368ea47d91517313eb已售罄@2x.png"
            mode="aspectFill"
            class="goods-card__sell-out-img am-block"
          ></image>
        </view>
      </view>
      <view class="goods-card__con">
        <view>
          <view class="goods-card__title-box">
            <text
              class="goods-card__title-name am-line-clamp-two am-text-break"
              >{{ title }}</text
            >
          </view>
        </view>
        <view>
          <div class="am-flex-row-center">
            <span class="price-icon">会员价</span>
            <span class="price-unit">￥</span>
            <text class="goods-card__unit-price am-text-eill">{{
              price.toFixed(2)
            }}</text>
            <span
              v-if="
                detail.skuChildList.length > 0 &&
                detail.skuChildList[0].originalPrice
              "
              class="original-price-identification"
              >￥</span
            >
            <text
              v-if="
                detail.skuChildList.length > 0 &&
                detail.skuChildList[0].originalPrice
              "
              class="original-price am-text-eill"
              >{{ detail.skuChildList[0].originalPrice }}</text
            >
          </div>
        </view>
        <view class="goods-card__footer am-flex-rc-between">
          <div class="am-flex-row-center">
            <span class="subEntry">销量</span>
            <text class="subEntry">{{ detail.salesVolume || 0 }}单</text>
          </div>

          <view class="goods-card__operation">
            <view
              class="goods-card__operation-btn goods-card__cart-btn am-flex-rc-center"
              @click.stop="addCart(1)"
              hover-stop-propagation
            >
              <image
                src="https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/19/8aba1e1bdfcb4cd3b46507b456655e03按钮@2x.png"
                mode="aspectFill"
                class="goods-card__icon-cart am-block"
              ></image>
            </view>
            <view
              class="goods-card__operation-btn goods-card__buy-btn am-flex-rc-center"
              @click.stop="addCart(2)"
              hover-stop-propagation
            >
              <image
                src="https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/19/d26acc4e72264ae2b1a1c853363dce33买@2x.png"
                mode="aspectFill"
                class="goods-card__icon-cart am-block"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <purchaseGoods
      :showModal="showPay"
      :detail="detail"
      @close="onclose"
      @submit="submit"
      :type="type"
    ></purchaseGoods>
  </view>
</template>

<script>
import { appOnLaunch } from '@/utils/appGlobalLifeCycle'
import purchaseGoods from '../purchase-goods/purchase-goods.vue'
export default {
  name: 'goods-card',
  props: {
    goodsId: {
      type: String
    },
    url: {
      type: String
    },
    cover: {
      type: String
    },
    title: {
      type: String
    },
    // 价格
    price: {
      type: [String, Number]
    },
    // 零售价
    purchasePrice: {
      type: [String, Number]
    },
    // 全部
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showPay: false,
      type: 1
    }
  },
  onHide() {},
  components: {
    purchaseGoods
  },
  methods: {
    addCart(type) {
      if (!this.$store.getters.isLogin) {
        appOnLaunch()
        return
      }
      if (this.detail.stockTotal == 0) return
      this.showPay = true
      uni.hideTabBar()
      this.type = type
    },
    submit(data) {
      uni.showTabBar()
      this.showPay = false
      if (this.type == 1) {
        this.$emit('addCart', data)
      } else {
        this.$u.route('pages/place-order/submit-order', {
          val: JSON.stringify(data.val)
        })
      }
    },
    onclose(show) {
      this.showPay = show
      uni.showTabBar()
    },
    goUrl() {
      if (!this.$store.getters.isLogin) {
        appOnLaunch()
        return
      }
      uni.navigateTo({
        url: this.url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-card {
  display: flex;
  padding: 24rpx;
  width: 702rpx;
  border-radius: 16rpx;
  margin-bottom: 12rpx;
  background-color: #fff;

  &.disabled {
    opacity: 0.5;
  }
}

.goods-card__img {
  border-radius: 16rpx;
}

.goods-card__cover {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  flex-shrink: 0;
  border-radius: 15rpx;
}

.goods-card__sell-out {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(#000, 0.5);
}

.goods-card__sell-out-img {
  width: 99rpx;
  height: 26rpx;
}

.goods-card__con {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: 0;
  margin-left: 20rpx;
}

.goods-card__title-box {
  // height: 80rpx;
}

.goods-card__title-name {
  color: #1d2129;
  font-size: 30rpx;
  line-height: 48rpx;
  font-weight: 500;
}

.goods-card__unit-price {
  display: block;
  font-weight: 600;
  font-family: PingFang SC, PingFang SC;
  font-size: 40rpx;
  color: #ec5d29;
  line-height: 48rpx;
  text-align: left;
}

.goods-card__operation {
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  height: 60rpx;
  margin-left: 15rpx;
}

.goods-card__icon-cart {
  margin-left: 20rpx;
  width: 56rpx;
  height: 56rpx;
}

.price-icon {
  width: 76rpx;
  height: 32rpx;
  line-height: 32rpx;
  background: url('https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/10/08/ab03b57d944447c4917ccb80894b5b87tag.png');
  background-repeat: repeat-x;
  background-size: cover;
  font-size: 20rpx;
  text-align: center;
  color: #fff;
}

.price-unit {
  display: inline-block;
  margin: 0 6rpx;
  font-size: 24rpx;
  color: #ec5d29;
}

.subEntry {
  font-weight: 400;
  font-size: 24rpx;
  color: #86909c;
}

.original-price-identification,
.original-price {
  font-weight: 400;
  font-size: 20rpx;
  color: #c5c6c8;
  text-decoration: line-through;
}
</style>
